<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<head>
    <base href="<%=basePath%>">

    <meta charset="UTF-8">
    <title align='center'>图书馆管理书目管理员后台</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
</head>
<body>
<%--书目管理员可以管理自己负责的类型的书籍信息--%>
<%--可以根据书名和作者查--%>
<script type="text/javascript">
    $(function () {
        var bookType = "${manageType}";

        //全选功能实现
        $("#checkAll").click(function () {
            $("#tBody input[type = 'checkbox']").prop("checked", this.checked);
        });
        $("#tBody input[type = 'checkbox']").click(function () {
            if ($("#tBody input[type = 'checkbox']").length == $("#tBody input[type = 'checkbox']:checked").length) {
                $("#checkAll").prop("checked", true);
            } else {
                $("#checkAll").prop("checked", false);
            }
        });


        //该函数：收起用户输入的条件进行查询，如何将查询结果解析好展示在对应位置
        $("#selectBtn").click(function () {
            var bookName = $("#bookName").val();
            var bookAuthor = $("#bookAuthor").val();
            //前端存了数据进来
            $.ajax({
                url: 'queryBook?method=queryBookByCondition',
                data: {
                    bookName: bookName,
                    bookType: bookType,
                    bookAuthor: bookAuthor
                },
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    showBookForPage(data);
                }
            });
        });

            //刷新列表的函数
            function showBookForPage(data) {
                    //每查询一次，先把上次查询写到表单的结果清理掉
                if(data.code==1) {
                    $("#bookTab tbody").html("");
                    //转json字符串
                    var json = JSON.stringify(data.retData);
                    //jspn字符串转化为json数组
                    var jsonArray = JSON.parse(json);
                    for (var i = 0; i < jsonArray.length; i++) {
                        $("#bookTab").append('<tbody id="tBody"><tr><td><input type="checkbox" value=' + jsonArray[i].id + '/></td><td>' + jsonArray[i].isbn + '</td><td>' + jsonArray[i].bookName + '</td><td>' + bookType + '</td><td>' + jsonArray[i].remaining + '</td><td>' + jsonArray[i].price + '</td><td>' + jsonArray[i].author + '</td></tr></tbody>');

                    }
                }
            }

            //新建书籍，点击新建显示div
        $("#newBookBtn").click(function () {
            for (var i = 0; i < $("#lendBookDiv").length; i++) {
                $("#lendBookDiv")[i].style.display = "block";
            }
            for(var j = 0;j<$("#btnDiv").length;j++ ){
                $("#btnDiv")[j].style.display = "block";
            }
        });


            //新建书籍的div显示出来后，点击确定按钮，发送请求
            $("#addBookBtn").click(function () {
                //把上次填写的div都清空掉
                $("#lendBookDiv input").html("");
                var isbn = $("#isbnText").val();
                var bookName = $("#bookNameText").val();
                var remaining = $("#remainingText").val();
                var price = $("#priceText").val();
                var author = $("#authorText").val();
                $.ajax({
                    url:"addBook?method=addBookByCondition",
                    data:{
                        isbn:isbn,
                        bookName:bookName,
                        bookType:bookType,
                        remaining:remaining,
                        price:price,
                        author:author
                    },
                    type:'post',
                    dataType:'json',
                    success:function (data) {
                        //查询成功，div消失
                            for (var i = 0; i < $("#lendBookDiv").length; i++) {
                                $("#lendBookDiv")[i].style.display = "none";
                            }
                            for (var j = 0; j < $("#btnDiv").length; j++) {
                                $("#btnDiv")[j].style.display = "none";
                            }
                            var book = data.retData;
                            $("#bookTab").append('<tbody id="tBody"><tr><td><input type="checkbox" value=' + book.id + '/></td><td>' + book.isbn + '</td><td>' + book.bookName + '</td><td>' + bookType + '</td><td>' + book.remaining + '</td><td>' + book.price + '</td><td>' + book.author + '</td></tr></tbody>');
                        }

                });
            });


        //更改书籍功能，点击更该要先把数据查出来
        $("#updateBookBtn").click(function () {
            //获取所有选中书籍的id 修改一次只能改一个
            var checkedId = $("#tBody input[type = 'checkbox']:checked");
            if(checkedId.length != 1){
                alert("请选择一项要修改的书籍");
                return ;
            }
            var id = checkedId.val();
            //发送请求，查询书籍，填在表单上，然后显示表单
            $.ajax({
                url:'selectBook?method=selectBookById',
                data:{
                    id:id
                },
                type:'post',
                dataType:'json',
                success:function (data) {
                    if(data.code==1){
                        var book = data.retData;
                        $("#idText2").val(book.id);
                        $("#isbnText2").val(book.isbn);
                        $("#bookNameText2").val(book.bookName);
                        $("#remainingText2").val(book.remaining);
                        $("#priceText2").val(book.price);
                        $("#authorText2").val(book.author);
                        //更新书的div显现
                        for (var i = 0; i < $("#updateBookDiv").length; i++) {
                            $("#updateBookDiv")[i].style.display = "block";
                        }
                        for (var j = 0; j < $("#updateBtnDiv").length; j++) {
                            $("#updateBtnDiv")[j].style.display = "block";
                        }
                    }else {
                        alert("数据异常");
                    }
                }
            });
        });




        //为更新书籍的确定按钮绑定单击事件，点击发送请求
            $("#updateBtn").click(function () {
                var id = $("#idText2").val();
                var isbn = $.trim($("#isbnText2").val());
                var bookName = $.trim($("#bookNameText2").val());
                var remaining = $.trim($("#remainingText2").val());
                var price = $.trim($("#priceText2").val());
                var author = $.trim($("#authorText2").val());
                //非空判断的

                if(isbn!=null&&bookName!=null&&remaining!=null&&price!=null&&author!=null){
                    $.ajax({
                        url:'updateBook?method=updateBookByCondition',
                        data:{
                            id:id,
                            isbn:isbn,
                            bookName:bookName,
                            remaining:remaining,
                            price:price,
                            author:author
                        },
                        type:'post',
                        dataType:'json',
                        success:function (data) {
                            //展示查询结果其实就是再点一次查询按钮
                            if (data.code) {
                                $("#selectBtn").click();
                                //更新成功 给更新书籍的确定按钮绑定隐藏
                                for (var i = 0; i < $("#updateBookDiv").length; i++) {
                                    $("#updateBookDiv")[i].style.display = "none";
                                }
                                for (var j = 0; j < $("#updateBtnDiv").length; j++) {
                                    $("#updateBtnDiv")[j].style.display = "none";
                                }
                            }
                        }
                    });
                }
            });


        //添加书籍div的取消按钮
        $("#cancelBtn").click(function () {
            for (var i = 0; i < $("#lendBookDiv").length; i++) {
                $("#lendBookDiv")[i].style.display = "none";
            }
            for(var j = 0;j<$("#btnDiv").length;j++ ){
                $("#btnDiv")[j].style.display = "none";
            }
        });

        //更新书籍div的取消按钮
        $("#cancelUpdateBtn").click(function () {
            for (var i = 0; i < $("#updateBookDiv").length; i++) {
                $("#updateBookDiv")[i].style.display = "none";
            }
            for(var j = 0;j<$("#updateBtnDiv").length;j++ ){
                $("#updateBtnDiv")[j].style.display = "none";
            }
        });


        //先把简单的删除写了
        $("#deleteBookBtn").click(function () {
            //获取选中的id
            var checkedIds = $("#bookTab input[type='checkbox']:checked");
            var ids = "";
            $.each(checkedIds, function () {
                ids += this.value + ',';
            });
            ids = ids.substr(0, ids.length - 1);
            //发送请求
            $.ajax({
                url: 'deleteBook?method=deleteBookByIds',
                data: {
                    ids: ids
                },
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    alert(data.message);
                    if (data.code == 1) {
                        $("#selectBtn").click();
                    }
                }
            });
        });
    });
</script>
<h1 align='center'>图书管理书目管理员后台</h1 >
<hr>
<div>
        <b>查询书籍,通过条件筛选,支持模糊查询</b>
        <br>
        <div>书名</div>
        <input type="text" id="bookName"/>
        <div>作者</div>
        <input type="text" id="bookAuthor"/>
        <input type="button" value="查询" id="selectBtn"/>
    <hr>
    <br>
</div>
<b>书籍查询详细结果</b>
<br>
<br><br>
<table h1 border="1px" id="bookTab">
    <thead>
    <tr>
        <th><input type="checkbox" id="checkAll"/>选择</th>
        <th>ISBN</th>
        <th>书名</th>
        <th>所属类别</th>
        <th>剩余件数</th>
        <th>价格</th>
        <th>作者</th>
    </tr>
    </thead>
</table><br>
<br>
<button type="button" id="newBookBtn">新建</button>&nbsp;
<button type="button" id="updateBookBtn">修改</button>&nbsp;
<button type="button" id="deleteBookBtn">删除</button>&nbsp;

<!--新建书籍的div-->
<div id="lendBookDiv"  style="display: none" >
    <b>添加书籍</b><br>
    <input type="text" id="idText" style="display: none">
    ISBN:       <input type="text" id="isbnText" /><br>
    书名:        <input type="text" id="bookNameText"/><br>
    剩余件数:    <input type="text" id="remainingText"/><br>
    价格:        <input type="text" id="priceText"/><br>
    作者:        <input type="text" id="authorText"/><br>
</div>

    <div id="btnDiv" style="display: none">
        <input type="button" value="确定" id="addBookBtn" />&nbsp;&nbsp;
        <input type="button" value="取消" id="cancelBtn" />
    </div>

<!--更新书籍的div-->
    <div id="updateBookDiv"  style="display: none" >
        <b>更新书籍</b><br>
        <input type="text" id="idText2" style="display: none"/>
        ISBN:       <input type="text" id="isbnText2" /><br>
        书名:        <input type="text" id="bookNameText2"/><br>
        剩余件数:    <input type="text" id="remainingText2"/><br>
        价格:        <input type="text" id="priceText2"/><br>
        作者:        <input type="text" id="authorText2"/><br>
    </div>

    <div id="updateBtnDiv" style="display: none">
        <input type="button" value="更新" id="updateBtn" />&nbsp;&nbsp;
        <input type="button" value="取消" id="cancelUpdateBtn" />
    </div>
    <br>
    <a href="/exit">[安全退出]</a>
</body>
</html>
